require('./Transverse.less');
import Button from 'uxcore-button';
import Select from 'uxcore-select2';
import Areachart from 'components/areachart';
const Option = Select.Option;

const data1 = {
    one: {
        xText: '间隔率(%)',
        xAxis: ['线路1', '线路2', '线路3', '线路4', '线路5', '线路6', '线路7', '线路8', '线路9', '线路10', '线路11'],
        yAxis: [{
            name: '',
            showInLegend: false,
            color: '#6FAEEA',
            // data: [6, 11, 32, 11, 23, 33, 40, 34, 10, 21]
            data:[]
        }]
    },
    two: {
        xText: '准点率(%)',
        xAxis: ['线路1', '线路2', '线路3', '线路4', '线路5', '线路6', '线路7', '线路8', '线路9', '线路10', '线路11'],
        yAxis: [{
            name: '',
            showInLegend: false,
            color: '#F6984A',
            // data: [11, 23, 43, 53, 32, 30, 40, 65, 34, 20]
            data:[]
        }]
    },
    three: {
        xText: '平均速度(km/h)',
        xAxis: ['线路1', '线路2', '线路3', '线路4', '线路5', '线路6', '线路7', '线路8', '线路9', '线路10', '线路11'],
        yAxis: [{
            name: '',
            showInLegend: false,
            color: '#97EF87',
            // data: [12, 30, 23, 43, 21, 16, 30, 43, 12, 21]
            data:[]
        }]
    }
}

const data2 = {
    one: {
        xText: '间隔率(%)',
        xAxis: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
        yAxis: [{
            name: '',
            showInLegend: false,
            color: '#6FAEEA',
            // data: [20, 31, 11, 23, 43, 53, 32, 30, 40, 65, 34, 20]
            data:[]
        }]
    },
    two: {
        xText: '准点率(%)',
        xAxis: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
        yAxis: [{
            name: '',
            showInLegend: false,
            color: '#F6984A',
            // data: [12, 29, 12, 30, 23, 43, 21, 16, 30, 43, 12, 21]
            data:[]
        }]
    },
    three: {
        xText: '平均速度(km/h)',
        xAxis: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
        yAxis: [{
            name: '',
            showInLegend: false,
            color: '#97EF87',
            // data: [15, 17, 6, 11, 32, 11, 23, 33, 40, 34, 10, 21]
            data:[]
        }]
    }
}


class Transverse extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: data1,
            active: 'rotate',
            area: '',
            road: ''
        };
    }

    buttonClick(value) {
        switch (value) {
            case 'time':
                this.setState({ data: data2, active: value });
                break;
            default:
                this.setState({ data: data1, active: value });
                break;
        }
    }

    selectChange(type, value) {
        switch (type) {
            case "road":
                this.setState({ road: value });
                break;
            default:
                this.setState({ area: value });
                break;
        }
    }

    render() {
        let me = this;
        let { data, active } = this.state;
        return (
            <div className="transverse">
                <div>
                    <Button type='blue' className={active == 'rotate' ? 'button-active' : ''} onClick={me.buttonClick.bind(this, 'rotate')}>准点率</Button>
                    <Button type='blue' className={active == 'time' ? 'button-active' : ''} onClick={me.buttonClick.bind(this, 'time')}>同期对比</Button>
                </div>
                <div>
                    <Select defaultValue="拱墅区" style={{ width: 90 }} dropdownClassName="kuma-select2-selected-has-icon" onChange={this.selectChange.bind(this, 'area')}>
                        <Option value="拱墅区">拱墅区</Option>
                        <Option value="西湖区">西湖区</Option>
                        <Option value="上城区">上城区</Option>
                    </Select>
                    <Select defaultValue="余杭塘路" style={{ width: 90 }} dropdownClassName="kuma-select2-selected-has-icon" onChange={this.selectChange.bind(this, 'road')}>
                        <Option value="余杭塘路">余杭塘路</Option>
                        <Option value="文一西路">文一西路</Option>
                        <Option value="文二西路">文二西路</Option>
                    </Select>
                </div>
                <Areachart data={data.one} />
                <Areachart data={data.two} />
                <Areachart data={data.three} />
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

module.exports = Transverse;
